<!--
    group: 发票管理
    name: 开票列表
    item: 结算---（展示预估金额弹层）
-->
<template>
  <a-modal
    :width="config.width"
    :footer="null"
    :title="config.modalTitle"
    :destroyOnClose="true"
    v-model="config.visible"
  >
    <div class="estimated">
      <h5>请确认开票费用！</h5>

      <!--单笔结算（预估费用）-->
      <div v-if="config.source == 3">
        <p class="desc_explain">
          <span class="desc_name">本次开票金额</span>
          <span>{{ notCost.amount }}元</span>
        </p>
        <div class="desc_footer">
          <p><span class="desc_name">应缴个税</span>
            <span class="price">{{ notCost.personalTaxMoney }}元</span>
          </p>
          <p><span class="desc_name">应缴附加税</span>
            <span class="price">{{ notCost.additionalTaxMoney }}元</span>
          </p>
          <p><span class="desc_name">应缴增值税</span>
            <span class="price">{{ notCost.vatMoney }}元</span>
          </p>
          <p><span class="desc_name">开票服务费</span>
            <span class="price">{{ notCost.serviceChargeMoney }}元</span>
          </p>
        </div>
        <a-divider />
        <p class="desc_explain">
          <span class="desc_name">预计应缴费用</span>
          <span class="price">{{ notCost.allTotal }}元</span>
        </p>
      </div>

      <!--批量结算（本次开票费用）-->
      <div v-if="config.source == 4">
        <h4 class="mTop">本次开票金额</h4>
        <a-table
          bordered
          :loading="currentlyLoading"
          :rowKey="row => row.id"
          :row-selection="rowSelection"
          :columns="currentlyColumns"
          :data-source="currentlyData"
          :scroll="{x: 400,y: 300}"
          :pagination="false"
        >
          <!--发票类型 1-专票 2-普票-->
          <span slot="taxType" slot-scope="text,record">
            <span v-if="text" :class="text === 1 ? 'd' : 'c'" style="margin-right: 5px">
              {{{1:'专票',2:'普票'}[text] || ''}}
            </span>
          </span>

          <template slot="footer" slot-scope="currentPageData">
            合计： <span style="float: right;">{{ notCost.chargeInfoTotal }}元</span>
          </template>

        </a-table>
      </div>

      <div class="desc_btn">
        <a-button :disabled="currentlyLoading" @click="orderGenerate" type="primary" class="btnsLarge" v-preventReClick>生成订单</a-button>
        <a v-if="config.pendingOrders == 1" class="mLeft" @click="back">返回上一步</a>
      </div>
    </div>
  </a-modal>
</template>

<script>
import { calculatingBanchExpenses } from '@api/invoiceAdminister'
import { cloneObject,conversionElement } from '@/utils/util'

export default {
  name: 'invoiceBalance',
  props: ['config','checkList'],
  data(){
    return{
      // config: {
      //   width: '450px',
      //   visible: false,
      //   pendingOrders: 1, //1-有待支付订单  2-无待支付订单
      //   source: 3, //3-单笔结算  4-批量结算
      // },
      //单笔结算---本次应缴费用信息
      notCost: {},
      //批量结算---本次费用信息
      currentlyLoading: false,
      currentlyData: [],
      currentlyColumns: [
        {
          title: '发票类型',
          dataIndex: 'taxType',
          width: 100,
          scopedSlots: {customRender: 'taxType'},
          align: 'center'
        },
        {
          title: '开票金额',
          dataIndex: 'amount',
          customRender: (text,record) => {
            if (text != null){
              return Math.round(text * 100)/10000 + '元'
            }else {
              return '-'
            }
          },
          width: 120,
          align: 'center'
        },
        {
          title: '应缴个税',
          dataIndex: 'personalTaxMoney',
          customRender: (text,record) => {
            if (text != null){
              return Math.round(text * 100)/10000 + '元'
            }else {
              return '-'
            }
          },
          width: 100,
          align: 'center'
        },
        {
          title: '应缴增值税',
          dataIndex: 'vatMoney',
          customRender: (text,record) => {
            if (text != null){
              return Math.round(text * 100)/10000 + '元'
            }else {
              return '-'
            }
          },
          width: 130,
          align: 'center'
        },
        {
          title: '应缴附加税',
          dataIndex: 'additionalTaxMoney',
          customRender: (text,record) => {
            if (text != null){
              return Math.round(text * 100)/10000 + '元'
            }else {
              return '-'
            }
          },
          width: 130,
          align: 'center'
        },
        {
          title: '开票服务费',
          dataIndex: 'serviceChargeMoney',
          customRender: (text,record) => {
            if (text != null){
              return Math.round(text * 100)/10000 + '元'
            }else {
              return '-'
            }
          },
          width: 130,
          align: 'center'
        },
      ],

      //初始选中数组
      checkNewList: [],
      selectedRowKeys: [],
    }
  },
  watch:{
    'checkList': {
      handler(val){
        // console.log('接受父组件的数组',val)
        if (val && val.length > 0){
          this.checkNewList = cloneObject(val);
          this.selectedRowKeys = this.checkNewList.map(item => item.id);
        }
      },
      deep: true,
      immediate: false,  //初始值执行函数
    },
    'config': {
      handler(val){
        // console.log('invoiceBalance页面',val.visible)
        if (val.visible){
          this.calculatExpenses(this.checkNewList,val.source);
        }
      },
      deep: true,
      immediate: false,  //初始值执行函数
    },
  },
  computed: {
    rowSelection() {
      const { selectedRowKeys } = this;
      return {
        selectedRowKeys,
        hideDefaultSelections: true,
        //控制全选是否展示
        columnTitle: ' ',
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRowKeys = selectedRowKeys;

          // 在这里可以根据selectedRows更新其他数据属性值
          this.updateDataProperty(selectedRows);
        },
        getCheckboxProps: record => {
          return {
            props: {
              defaultChecked: record.checkShow == true
            }
          };
        },
      };
    },
  },
  methods: {
    //返回上一步
    back(){
      // this.$emit('backLimitCancle',this.config);
      this.$parent.backBePaidCancle(this.config);
    },
    //生成订单
    orderGenerate(){
      let payIdList = [];
      if (this.config.source == 3){
        payIdList = this.checkNewList.map(item => item.id);
      }else {
        if (this.selectedRowKeys.length > 0){
          payIdList = this.selectedRowKeys;
        }else {
          let bool = this.verificationList(this.checkNewList);
          if (bool){
            //赋值选中数据
            payIdList = this.checkNewList.map(item => item.id);
          }else {
            this.$message.warning('请至少选择一项生成订单');
          }
        }
      }

      if (payIdList.length > 0){
        this.config.payIdList = payIdList;    //赋值订单id跳转支付需要
        //子组件调用父组件方法
        this.$emit('balanceMethod',this.config);
      }
    },
    //校验属性值都为true
    verificationList(list){
      //every：若数组每一个对象都符合条件，则返回true ，只要有一个不符合条件就返回false。
      return list.every(item => {
        return item.checkShow == true
      });
    },
    //更新其他数据属性值---checkShow
    updateDataProperty(list){
      let newList = [];
      newList = this.checkNewList;
      if (list.length > 0){
        //checkNewList  比对原数组和选中数组的id值 相同的赋值true
        for (let obj1 of newList) {
          for (let obj2 of list) {
            if (obj1.id == obj2.id) {
              // 假设我们想要更新name属性为value属性
              obj1.checkShow = true;
              break
            }else{
              obj1.checkShow = false;
            }
          }
        }

        //重新请求预计算接口
        this.calculatExpenses(newList);
      }else{
        //重置合计金额
        this.notCost.chargeInfoTotal = 0;
      }
    },
    //预计算费用
    calculatExpenses(params,source){
      this.currentlyLoading = true;
      calculatingBanchExpenses(params).then(res => {
        if (res.success) {
          if (res.result){
            this.currentlyLoading = false;
            let data = cloneObject(res.result.entChargeInfoVOS[0]);

            //处理发票金额
            this.notCost.allTotal = conversionElement(data.allTotal);  //预计应缴费用
            this.notCost.chargeInfoTotal = conversionElement(data.chargeInfoTotal);  //本次费用合计

            if (source == 3){
              //处理本次费用
              let chargeInfo = data.chargeInfoList;
              if (data.chargeInfoList && data.chargeInfoList.length > 0){
                this.notCost.personalTaxMoney = conversionElement(chargeInfo[0].personalTaxMoney);  //本次应缴个税
                this.notCost.additionalTaxMoney = conversionElement(chargeInfo[0].additionalTaxMoney);  //本次应缴附加税
                this.notCost.vatMoney = conversionElement(chargeInfo[0].vatMoney);  //本次应缴增值税
                this.notCost.serviceChargeMoney = conversionElement(chargeInfo[0].serviceChargeMoney);  //本次开票服务费
                this.notCost.amount = conversionElement(chargeInfo[0].amount);  //本次开票金额
              }
              this.$forceUpdate(); //更新视图
            }else {
              this.currentlyData = data.chargeInfoList || [];  //本次费用列表
            }
          }
        }else{
          this.$message.warning(res.message);
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
//预估费用
.estimated{
  width: 100%;
}
h5{
  font-weight: bolder;
  font-size: 16px;
}

//弹层公共样式
.desc_name{
  color: #101010;
}
.desc_explain{
  width: 100%;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.desc_footer{
  width: 100%;
  padding: 5px 10px 0 10px;
  //background: #F9F8F9;
  //border: 1px solid #dee0e2;
  //border-radius: 10px;
  //margin-bottom: 20px;
  p{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .desc_name{
      color: #6c6a6c;
    }
  }
}


.price{
  color: @color-blue;
}

.desc_btn{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin: 50px 0 20px 0;
  text-align: center;
}
.desc_btn a{
  margin-left: 10px;
  //text-decoration: underline;
}
</style>
